<template>
  <div>
    <el-menu
      :default-active="deact"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select='select'
      :collapse="isCollapse"
      background-color='#96f099'
      text-color='000'
      :unique-opened='true'
      :router='true'
    >
      <span @click.stop="isCollapse=!isCollapse" class="fold">
        <i class="el-icon-s-unfold" v-if="isCollapse" style="color:#1F62CF;fontSize:18px;"></i>
        <i class="el-icon-s-fold" v-else style="color:#1F62CF;fontSize:18px;"></i>
      </span>
      <el-submenu :index="item.id" v-for="(item,index) in menu" :key='index'>
        <template #title>
          <i :class="item.class"></i>
          <span>{{item.nav}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="menu.index" v-for="(menu,ind) in item.navmenu" :key="ind">{{menu.navName}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs ,onMounted, onBeforeMount} from "vue";

export default {
  setup() {
    let state = reactive({
      deact:sessionStorage.getItem('active')?sessionStorage.getItem('active'):'webnet',
      isCollapse: false,
      menu:[
        {id:1,class:'el-icon-star-off',nav:'网址导航',navmenu:[{index:'webnet',navName:'前端web'},{index:'cainet',navName:'理财网站'},{index:'othernet',navName:'其它宝站'}] },
        // {id:2,class:'el-icon-help',nav:'公众号',navmenu:[{index:'2-1',navName:'选项一'},{index:'2-2',navName:'选项2'}]},
        {id:3,class:'el-icon-picture-outline-round',nav:'个人空间',navmenu:[{index:'diary',navName:'心记'},{index:'note',navName:'笔记'},{index:'bill',navName:'账单'}]},
        {id:4,class:'el-icon-s-platform',nav:'趣味堂',navmenu:[{index:'fan',navName:'乐趣'}]},
      ]
    });
    
    let {ctx}=getCurrentInstance()

    onBeforeMount(()=>{
      //获取路由
              let href=location.href.split(/\/\//)[1]

              let nn=href.match(/(?<=[\/])\w{1,}/)
              state.deact=nn[0]
              sessionStorage.setItem('active',nn[0])
              
    })


    let handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };
    let handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    }
    let select=(val)=>{
      state.deact=val
      sessionStorage.setItem('active',val)
    }

    return {
      ...toRefs(state),
      handleOpen,
      handleClose,
      select
    };
  },
};
</script>

<style lang='less' scoped>
.fold{
  display: inline-block;
  width: 100%;
  line-height: 24px;
  margin-top: 10px;
  text-align: center;
  border-bottom: 1px solid #9F9B9B;
}
/deep/.el-submenu__title{
  height: 46px;
  line-height: 46px;
}
.el-submenu .el-menu-item{
  height: 34px;
  line-height: 34px;
}
/deep/ .el-menu-item-group__title{
  padding: 0;
}
</style>